<template>
    <van-config-provider theme="dark">
        <div class="page">
            <div class="current-time">
                <span>当前时间:</span>
                <span>{{ currentTime }}</span>
            </div>
            <div class="content-body">
                <div class="content">
                    <TimeForm
                        v-model:sportsMinutes="countdown.sportsTime"
                        v-model:restMinutes="countdown.restTime"
                    ></TimeForm>
                    <!-- 进度条 -->
                    <div
                        v-if="startForm.sportsShow || startForm.durationShow"
                        class="sports-countdown"
                    >
                        <div v-if="startForm.sportsShow" class="sport-outer">
                            <van-circle
                                :current-rate="computedSportsCurrentPercentage"
                                :rate="100"
                                size="50vw"
                                :stroke-width="100"
                                color="#67C23A"
                            >
                                <div
                                    style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        height: 100%;
                                    "
                                    class="sport-circle"
                                    :class="{
                                        'animation-pause': startForm.pause,
                                    }"
                                >
                                    <div>运动中</div>
                                    <div>
                                        {{
                                            startForm.sportsTotal -
                                            startForm.sportsCurrent
                                        }}s
                                    </div>
                                </div>
                            </van-circle>
                        </div>
                        <div v-if="startForm.durationShow" class="rest-outer">
                            <van-circle
                                :current-rate="
                                    computeddurationCurrentPercentage
                                "
                                :rate="100"
                                size="50vw"
                                :stroke-width="100"
                                color="#F56C6C"
                            >
                                <div
                                    style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        height: 100%;
                                    "
                                    class="rest-circle"
                                    :class="{
                                        'animation-pause': startForm.pause,
                                    }"
                                >
                                    <div>休息中</div>
                                    <div>
                                        {{
                                            startForm.durationTotal -
                                            startForm.durationCurrent
                                        }}s
                                    </div>
                                </div>
                            </van-circle>
                        </div>
                    </div>
                </div>
                <!-- 统计 -->
                <div class="count-wrapper">
                    <van-notice-bar
                        color="#67C23A"
                        background="rgba(20,20,20, 1)"
                    >
                        运动轮次: {{ count.sportsCount }} ({{
                            duration.sportsDuration
                        }}分钟)
                    </van-notice-bar>
                    <van-notice-bar
                        color="#F56C6C"
                        background="rgba(20,20,20, 1)"
                    >
                        休息轮次: {{ count.restCount }} ({{
                            duration.restDuration
                        }}分钟)
                    </van-notice-bar>
                    <van-notice-bar
                        color="#409EFF"
                        background="rgba(20,20,20, 1)"
                        >总时长: {{ computedDuration }}分钟</van-notice-bar
                    >
                </div>
                <div class="bottom-btns">
                    <!-- 归零 -->
                    <van-button type="warning" plain @click="handleResetAll">
                        数据归零
                    </van-button>
                    <!-- 暂停按钮 -->
                    <van-button
                        type="danger"
                        plain
                        @click="handlePuase"
                        :disabled="
                            !(startForm.sportsShow || startForm.durationShow)
                        "
                    >
                        {{ startForm.pause ? '继续' : '暂停' }}
                    </van-button>
                    <!-- 开始按钮 -->
                    <van-button
                        plain
                        @click="handleStart"
                        :disabled="
                            startForm.sportsShow || startForm.durationShow
                        "
                    >
                        开始
                    </van-button>
                </div>
            </div>
            <ReadGo ref="readGo"></ReadGo>
        </div>
    </van-config-provider>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { reactive } from 'vue';
import { onUnmounted } from 'vue';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useStorage } from '@vueuse/core';
import { computed } from 'vue';
import TimeForm from './components/TimeForm.vue';
import ReadGo from './components/ReadGo.vue';

const currentTime = ref(dayjs().format('HH:mm:ss'));

const timer = ref<number | undefined>(undefined);

// 时间设置
const countdown = useStorage(
    'countdown-form',
    reactive({
        sportsTime: 3,
        restTime: 2,
    })
);
// 次数统计
const count = useStorage(
    'count-form',
    reactive({
        sportsCount: 0,
        restCount: 0,
    })
);
// 时长统计
const duration = useStorage(
    'duration-form',
    reactive({
        sportsDuration: 0,
        restDuration: 0,
    })
);

const computedDuration = computed(() => {
    const { sportsDuration, restDuration } = duration.value;
    return sportsDuration + restDuration;
});

const startForm = reactive({
    sportsShow: false,
    sportsCurrent: 0,
    sportsTotal: 0,
    durationShow: false,
    durationCurrent: 0,
    durationTotal: 0,
    pause: false,
});

// 注册定时器
const startInterval = () => {
    if (timer.value) return;
    timer.value = setInterval(() => {
        // 更新当前时间
        currentTime.value = dayjs().format('HH:mm:ss');

        // 处理运动中倒计时
        if (startForm.sportsShow && !startForm.pause) {
            startForm.sportsCurrent += 1;
            if (computedSportsCurrentPercentage.value > 100) {
                // 运动时间走完，做结算
                startForm.sportsShow = false;
                count.value.sportsCount += 1; // 次数
                duration.value.sportsDuration += countdown.value.sportsTime; // 时长
                // 播放运动结束音效
                handlePlaySound(1);
                // 进入休息时间循环
                handleShowRest();
            }
        }
        // 处理休息中倒计时
        if (startForm.durationShow && !startForm.pause) {
            startForm.durationCurrent += 1;
            if (computeddurationCurrentPercentage.value > 100) {
                // 休息时间走完，做结算
                startForm.durationShow = false;
                count.value.restCount += 1; // 次数
                duration.value.restDuration += countdown.value.restTime; // 时长
                // 播放运动结束音效
                handlePlaySound(2);
                // 进入运动循环
                handleShowSports();
            }
        }
    }, 1000);
};

const createAudio = (src: string) => {
    const audio = document.createElement('audio');
    audio.src = src;
    return audio;
};
// 播放音效
const sound1 = createAudio(
    'https://imgcdn.huanjutang.com/image/2024/05/09/e0862fe78340f1bfbc2d65789577c1b5.mp3'
);
const sound2 = createAudio(
    'https://imgcdn.huanjutang.com/image/2024/05/09/951628d9940fa6059ac183ad65ec7947.mp3'
);
const handlePlaySound = (type: number) => {
    if (type === 1) sound1.play();
    if (type === 2) sound2.play();
};

const readGo = ref(null);

const handleStart = () => {
    // 倒计时前给5秒的准备时间
    if (readGo.value) {
        const readGoCmp = readGo.value;
        console.log('handleReady' in readGoCmp)
        if ('handleReady' in readGoCmp) {
            (readGoCmp as {handleReady: (cb:Function) => {}}).handleReady(() => {
                handleShowSports();
            });
        }
    }

    // 展示运动倒计时
};

const handleShowSports = () => {
    if (startForm.sportsShow || startForm.durationShow) return;

    const { sportsTime } = countdown.value;
    startForm.sportsShow = true;
    startForm.sportsCurrent = 0;
    startForm.sportsTotal = sportsTime * 60;
};
const handleShowRest = () => {
    if (startForm.sportsShow || startForm.durationShow) return;

    const { restTime } = countdown.value;
    startForm.durationShow = true;
    startForm.durationCurrent = 0;
    startForm.durationTotal = restTime * 60;
};

const computedSportsCurrentPercentage = computed(() => {
    const { sportsCurrent, sportsTotal } = startForm;
    return Math.ceil((sportsCurrent / sportsTotal) * 100);
});
const computeddurationCurrentPercentage = computed(() => {
    const { durationCurrent, durationTotal } = startForm;
    return Math.ceil((durationCurrent / durationTotal) * 100);
});

// 数据归零
const handleResetAll = () => {
    count.value.sportsCount = 0;
    count.value.restCount = 0;
    duration.value.sportsDuration = 0;
    duration.value.restDuration = 0;
    startForm.sportsShow = false;
    startForm.sportsCurrent = 0;
    startForm.sportsTotal = 0;
    startForm.durationShow = false;
    startForm.durationCurrent = 0;
    startForm.durationTotal = 0;
    startForm.pause = false;
};

// 暂停/继续
const handlePuase = () => {
    if (startForm.sportsShow || startForm.durationShow) {
        startForm.pause = !startForm.pause;
    }
};

onMounted(() => {
    startInterval();
});
onUnmounted(() => {
    clearInterval(timer.value);
    timer.value = undefined;
});
</script>

<style lang="scss" scoped>
.page {
    --van-button-plain-background: transparent;
    padding: 32px;
    padding-bottom: 152px + 32px;
    .current-time {
        font-size: 32px;
        padding: 16px 0;
        background: linear-gradient(to top, rgba(white, 0.2), rgba(white, 0.1));
        border: 1px solid rgba(white, 0.1);
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        gap: 16px;
        span {
            flex: 1;
            &:nth-of-type(1) {
                text-align: right;
            }
        }
    }
    // .content-body {
    // }

    .count-wrapper {
        margin-top: 32px;
    }

    .content {
        position: relative;
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .sports-countdown {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(black, 0.9);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        --van-circle-text-font-size: 80px;
    }

    .bottom-btns {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        padding: 32px;
        gap: 32px;
        background: #1c1c1c;
        & > * {
            flex: 1;
        }
    }
    .sport-outer,
    .rest-outer {
        animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
            both;
    }
    .sport-circle,
    .rest-circle {
        animation: pulsate-fwd 1s ease-in-out infinite both;
        &.animation-pause {
            animation-play-state: paused;
        }
    }
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulsate-fwd {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
</style>
